<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户登录</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            margin-top: 50px;
        }
        .login-form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .btn-send-code {
            margin-top: 10px;
        }
        .register-link {
            margin-top: 15px;
            text-align: center;
        }
        .alert {
            margin-bottom: 15px;
        }
        .login-method-toggle {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="login-form">
        <div id="alertContainer">
            <% if (request.getAttribute("error") != null) { %>
            <div class="alert alert-danger" role="alert">
                <%= request.getAttribute("error") %>
            </div>
            <% } %>
            <% if (request.getAttribute("message") != null) { %>
            <div class="alert alert-success" role="alert">
                <%= request.getAttribute("message") %>
            </div>
            <% } %>
        </div>

        <ul class="nav nav-tabs" id="loginTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#username-login" type="button">账号密码登录</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#phone-login" type="button">手机号登录</button>
            </li>
        </ul>

        <div class="tab-content" id="loginTabContent">
            <!-- 用户名登录 -->
            <div class="tab-pane fade show active" id="username-login">
                <form id="usernameLoginForm" action="${pageContext.request.contextPath}/user/login" method="post">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">登录</button>
                </form>
            </div>

            <!-- 手机号登录 -->
            <div class="tab-pane fade" id="phone-login">
                <div class="login-method-toggle">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="loginType" id="loginTypeCode" value="code" checked>
                        <label class="form-check-label" for="loginTypeCode">验证码登录</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="loginType" id="loginTypePassword" value="password">
                        <label class="form-check-label" for="loginTypePassword">密码登录</label>
                    </div>
                </div>
                
                <form id="phoneLoginForm" action="${pageContext.request.contextPath}/user/login/phone" method="post">
                    <input type="hidden" id="loginType" name="loginType" value="code">
                    
                    <div class="form-group">
                        <label for="phone">手机号</label>
                        <input type="tel" class="form-control" id="phone" name="phone" required
                               pattern="^1[3-9]\d{9}$"
                               title="请输入正确的手机号">
                    </div>
                    
                    <!-- 验证码登录部分 -->
                    <div id="codeLoginSection">
                        <div class="form-group">
                            <label for="verificationCode">验证码</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="verificationCode" name="verificationCode">
                                <button type="button" class="btn btn-outline-primary" id="sendCodeBtn">发送验证码</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 密码登录部分 -->
                    <div id="passwordLoginSection" style="display: none;">
                        <div class="form-group">
                            <label for="phonePassword">密码</label>
                            <input type="password" class="form-control" id="phonePassword" name="password">
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary w-100">登录</button>
                </form>
            </div>
        </div>

        <div class="register-link">
            <p>还没有账号？<a href="${pageContext.request.contextPath}/register">立即注册</a></p>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
    // 切换登录方式
    document.querySelectorAll('input[name="loginType"]').forEach(radio => {
        radio.addEventListener('change', function() {
            const loginType = this.value;
            document.getElementById('loginType').value = loginType;
            
            if (loginType === 'code') {
                document.getElementById('codeLoginSection').style.display = 'block';
                document.getElementById('passwordLoginSection').style.display = 'none';
                document.getElementById('verificationCode').setAttribute('required', '');
                document.getElementById('phonePassword').removeAttribute('required');
            } else {
                document.getElementById('codeLoginSection').style.display = 'none';
                document.getElementById('passwordLoginSection').style.display = 'block';
                document.getElementById('verificationCode').removeAttribute('required');
                document.getElementById('phonePassword').setAttribute('required', '');
            }
        });
    });

    // 验证手机号是否已注册
    document.getElementById('phone').addEventListener('blur', function() {
        const phone = this.value;
        if (phone && phone.match(/^1[3-9]\d{9}$/)) {
            fetch('${pageContext.request.contextPath}/user/check-phone?phone=' + phone)
                .then(response => response.json())
                .then(registered => {
                    if (!registered) {
                        showAlert('该手机号未注册，请先注册', 'warning');
                    }
                });
        }
    });

    function showAlert(message, type = 'danger') {
        const alertContainer = document.getElementById('alertContainer');
        alertContainer.innerHTML = `
            <div class="alert alert-\${type} alert-dismissible fade show" role="alert">
                \${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
    }

    document.getElementById('sendCodeBtn').addEventListener('click', function() {
        const phone = document.getElementById('phone').value;
        if (!phone) {
            showAlert('请输入手机号');
            return;
        }

        // 先检查手机号是否已注册
        fetch('${pageContext.request.contextPath}/user/check-phone?phone=' + phone)
            .then(response => response.json())
            .then(registered => {
                if (!registered) {
                    showAlert('该手机号未注册，请先注册', 'warning');
                    return;
                }
                
                // 手机号已注册，发送验证码
                fetch('${pageContext.request.contextPath}/api/user/send-code?phone=' + phone, {
                    method: 'POST'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        showAlert(data.error);
                    } else {
                        showAlert('验证码已发送', 'success');
                        // 开始倒计时
                        let countdown = 60;
                        const btn = this;
                        btn.disabled = true;
                        const timer = setInterval(() => {
                            btn.textContent = countdown + '秒后重新发送';
                            countdown--;
                            if (countdown < 0) {
                                clearInterval(timer);
                                btn.disabled = false;
                                btn.textContent = '发送验证码';
                            }
                        }, 1000);
                    }
                })
                .catch(error => {
                    showAlert('发送验证码失败');
                });
            });
    });
</script>
</body>
</html>